angular.module('app').directive('otherExpense', function($compile) {
    return {
        restrict: 'E',
        template: '',
        replace: true,
        compile: function(tElm, tAttrs) {
            return function($scope, $elem, $attrs) {
                var _index = 0,exportSource = $attrs.exportSource;
                
                // ajax获取服务器端支付方式的配置
                //    写在这里
                // $.ajax({
                //     success: function () {
                //         if () {
                //             $scope.createOtherExpense
                //         }
                //     }
                // })

                $scope.createOtherExpense = function($scope,ev){
                    var selectObject = new Date().getTime();
                    var option1 = exportSource+'['+_index+']._Option1.selected',option2 = exportSource+'['+_index+']._Option2.selected',option3 = exportSource+'['+_index+']._Option3';

                    $scope.selectList1 = [{
                        name: '服务费',
                        value: 0
                    }, {
                        name: '水费',
                        value: 1
                    }, {
                        name: '电费',
                        value: 2
                    }, {
                        name: '物业费',
                        value: 3
                    }], $scope.selectList2 = [{
                        name: '随租金付',
                        value: 0
                    }];

                    var TPL =['<div class="expensePanel"><div class="expenseItem">']
                    TPL.push('<div style="width:150px; display: inline-block;"><ui-select ng-model="'+option1+'" theme="bootstrap"><ui-select-match placeholder="请选择...">{{$select.selected.name}}</ui-select-match><ui-select-choices repeat="item in selectList1 | filter: $select.search"><div ng-bind-html="item.name | highlight: $select.search"></div></ui-select-choices></ui-select></div>');
                    TPL.push('<div style="width:150px; display: inline-block; margin-left:20px;"><ui-select ng-model="'+option2+'" theme="bootstrap"><ui-select-match placeholder="请选择...">{{$select.selected.name}}</ui-select-match><ui-select-choices repeat="item in selectList2 | filter: $select.search"><div ng-bind-html="item.name | highlight: $select.search"></div></ui-select-choices></ui-select></div>');
                    TPL.push('<div style="display: inline-block; margin-left:20px;"><input ng-model="'+option3+'" type="number" style="display:inline-block;width:60%;margin-right:10px;" class="form-control">元/月</div>');
                    TPL.push('<b class="badge bg-info pull-right" ng-click="close(this,'+_index+',$event)">x</b></div></div>')
                    angular.element(ev.target).parents('.addButtonPanel').before($compile(TPL.join(''))($scope))
                    _index ++;
                }

                $scope.close = function($scope,_i,ev){
                    angular.element(ev.target).parents('.expensePanel').remove();
                    $scope[exportSource][_i] = undefined;
                }

                var baseTPL = '<div ng-click="createOtherExpense(this,$event)" class="addButtonPanel"><img src="/css/directives/otherExpense/add.png"><span>添加</span></div>'
                
                var newElem = $compile(baseTPL)($scope);
                $elem.append(newElem);
            }
        }
    }
});
